<!--
 * @Author: yongtian.hong
 * @Date: 2019-01-12 14:04:22
 * @LastEditors: yongtian.hong
 * @LastEditTime: 2019-01-12 16:46:12
 * @Description: 商品的sku列表
 -->

<style lang='scss' scoped>
.scroll-view {
    height: 260px;
}
.sku-list-content {
    padding: 10px 5px;
    box-sizing: border-box;
    background: #fff;
}
.sku {
    position: relative;
    width: 80px;
    height: 80px;
    padding: 5px 10px;
    margin-bottom: 5px;
    border: solid 1px #e6e6e6;
    box-sizing: border-box;
    img {
        width: 100%;
        height: 100%;
    }
}
.sku-selected::before {
    content: "L";
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: 0;
    right: 0;
    margin-top: -10px;
    margin-left: -10px;
    width: 20px;
    height: 20px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    transform: rotateZ(45deg) rotateY(180deg);
    background: #608be8;
    border-radius: 50%;
}
</style>

<template>
    <scroll-view class="scroll-view">
        <div class="sku-list-content">
            <div
                v-for="(i,index) in 10"
                :key="i"
                class="sku"
                :class="{'sku-selected':sIndex==index}"
                @click.stop="handleClick(i,index)"
            >
                <img src="@/assets/clothes.jpg">
            </div>
        </div>
    </scroll-view>
</template>

<script>
import scrollView from '@/components/scrollView'
export default {
    components: {
        scrollView
    },
    data() {
        return {
            sIndex: 0
        }
    },
    methods: {
        handleClick(item, index) {
            this.sIndex = index;
            console.log('item', item)
        }
    },

}
</script>